<template>
	<div class="body-bgc">
		<div class="top-title" style="display: none">选择自动拉群</div>
		<div style="margin-left: 20px; margin-top: 15px; width: 600px" v-if="typevalue == 1">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="自动拉群">
					<template #header> 自动拉群({{ tableData.length }}) </template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template #default="scope">
						<span style="color: #409eff; cursor: pointer; margin-left: 15px" @click="deleteid(scope.row)">移除</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="top-title" v-if="Route.query.type == 2 || typevalue == 0">拉群方式</div>
		<div style="margin-left: 20px; margin-top: 15px" v-if="Route.query.type == 2 || typevalue == 0">
			<span>拉群方式：</span>
			<span>
				<el-radio-group :disabled="Route.query.type==2" v-model="ruleForm.type" @change="agreeChange" class="ml-4">
					<el-radio label="1" size="large">群二维码拉群</el-radio>
					<el-radio label="2" size="large">企微活码拉群</el-radio>
				</el-radio-group>
			</span>
		</div>
		<div style="margin-left: 20px; margin-top: 15px" v-if="Route.query.type == 2 || typevalue == 0">
			<span>入群方式：</span>
			<span>
				<el-radio-group :disabled="Route.query.type==2" v-model="ruleForm.join_type" class="ml-4">
					<el-radio label="1" size="large">直接入群</el-radio>
					<el-radio label="2" size="large">需添加员工</el-radio>
				</el-radio-group>
			</span>
		</div>
		<div class="top-title" v-if="Route.query.type == 2 || typevalue == 0">基础信息</div>
		<div class="top-title" v-if="Route.query.type == 1">
			设置成员 <span><el-switch v-model="ruleForm.user_set" :active-value="1" :inactive-value="2" /></span
			><span style="font-size: 14px; font-weight: 500; color: #a8adaf">关闭后保持原自动拉群成员设置</span>
		</div>
		<div style="margin-top: 15px" v-if="ruleForm.user_set==1">
			<el-form
				ref="ruleFormRef"
				:model="ruleForm"
				:rules="rules"
				label-width="120px"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
			<!-- v-if="Route.query.type == 2" -->
				<el-form-item label="二维码名称" class="is-required" show-message="false" v-if="typevalue != 1" >
					<el-input
						v-model="ruleForm.name"
						style="width: 400px"
						placeholder="名称不会展示给客户，用于企业记录渠道名称或使用场景"
					/>
				</el-form-item>

				<el-form-item label="选择分组" class="is-required" v-if="Route.query.type == 2 || typevalue == 0">
					<el-select v-model="ruleForm.grouping_id" class="m-2" placeholder="选择分组">
						<el-option v-for="(item, index) in groupin" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form ref="multipleTableRef" :model="form" label-width="120px" :rules="rules" class="is-required">
					<el-form-item label="使用人员" v-if="ruleForm.join_type == 2">
						<el-button @click="showDialogue('1', 'staff', 'staffid')"
							><el-icon style="margin-right: 5px"><Plus /></el-icon>添加成员</el-button
						>
					</el-form-item>
					<!-- 显示添加成员部分 -->
					<div style="margin-left: 78px; margin-bottom: 15px" v-if="isRefresh">
						<span
							class="app-tag app-gap-tr"
							style="display: inline-flex"
							v-for="(select, index) in ruleForm.staffs"
							:key="index"
						>
							<span class="app-flex-left">
								<el-avatar class="cho-margin" shape="square" :size="30" :src="select.avatar" />
								<span class="app-gap-words-left">{{ select.name }}</span>
							</span>
							<!-- 删除按钮 -->
							<el-icon style="color: #606266" @click="handleDele('staffid', select, index)" :size="16" color="#999">
								<CircleClose />
							</el-icon>
						</span>
					</div>
				</el-form>
				<el-form-item label="备用成员" v-if="ruleForm.join_type == 2">
					<el-select v-model="ruleForm.standby" class="m-2" placeholder="选择分组" multiple>
						<el-option v-for="(item, index) in staffList" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="员工添加上限" v-if="ruleForm.join_type == 2">
					<el-switch
						v-model="ruleForm.is_astrict"
						:disabled="switchControl"
						:active-value="1"
						:inactive-value="2"
					/><span style="margin-left: 10px">{{ ruleForm.is_astrict == 1 ? '已开启' : '已关闭' }}</span>
				</el-form-item>
				<el-form-item v-if="ruleForm.is_astrict == 1">
					<div style="background-color: #f7fcff; border: 1px solid #b4dbff; border-radius: 5px; padding: 10px">
						<div>员工添加上限：1，员工从任何渠道添加的客户，都会计入员工添加上限；</div>
						<div style="margin-left: 99px">2，到达添加上限后，只影响设置了添加上限的渠道活码</div>
					</div>
				</el-form-item>
				<el-form-item v-if="ruleForm.staffs.length > 0">
					<!-- <div style="width: 700px">
						<span>
							<el-input
								v-model="selectStaffValue.name"
								class="w-50 m-2"
								placeholder="请输入员工昵称"
								:suffix-icon="Search"
								@keyup.enter="getUserList"
								style="width: 300px"
							/>
						</span>
						<span style="float: right; color: #409eff">批量设置</span>
					</div> -->
				</el-form-item>
				<el-form-item v-if="ruleForm.is_astrict == 1">
					<div style="width: 500px">
						<el-table :data="ruleForm.staffs" style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55" />
							<el-table-column :label="'共'+ruleForm.staffs.length+'个员工'">
								<template #default="scope">
									<el-avatar class="cho-margin" shape="square" :size="30" :src="scope.row.avatar" />
									<span class="app-gap-words-left">{{ scope.row.name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="每日添加客户上限">
								<template #default="scope">
									<el-input-number v-model="scope.row.size" :min="1" controls-position="right" />
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-form-item>
				<el-form ref="multipleTableRef" label-width="120px" :model="form" :rules="rules" v-if="radio1 == 2">
					<el-form-item label="备用员工" prop="name">
						<el-button @click="showDialogue('2', 'staff', 'staffidTime')"
							><el-icon style="margin-right: 5px"><Plus /></el-icon>添加员工</el-button
						>
					</el-form-item>
					<!-- 显示添加成员部分 -->
					<div style="margin-left: 78px" v-if="isRefresh">
						<span
							class="app-tag app-gap-tr"
							style="display: inline-flex"
							v-for="(select, index) in selectStaffDay"
							:key="index"
						>
							<span class="app-flex-left">
								<el-avatar class="cho-margin" shape="square" :size="30" :src="select.avatar" />
								<span class="app-gap-words-left">{{ select.name }}</span>
							</span>
							<!-- 删除按钮 -->
							<el-icon style="color: #606266" @click="handleDele('staffid', select, index)" :size="16" color="#999">
								<CircleClose />
							</el-icon>
						</span>
					</div>
				</el-form>
				<!-- <el-form-item label="备用员工">
					<el-select v-model="value" class="m-2" placeholder="选填，选择备用员工">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<span style="margin-left: 10px; color: #919191">当前活码中所有员工均不可接待时，将分配客户给该员工</span>
				</el-form-item> -->
				<el-form-item label="好友验证" v-if="ruleForm.join_type == 2">
					<el-switch v-model="ruleForm.skip_verify" @change="valueChange" :active-value="1" :inactive-value="2" />
					<span style="margin-left: 10px">{{ ruleForm.skip_verify == 1 ? '已开启' : '已关闭' }}</span>
				</el-form-item>
				<el-form-item label="标签" v-if="ruleForm.join_type == 2">
					<el-switch v-model="ruleForm.is_tag" @change="labelapi" :active-value="1" :inactive-value="2" /><span
						style="margin-left: 10px"
						>{{ ruleForm.is_tag == 1 ? '已开启' : '已关闭' }}</span
					>
				</el-form-item>
				<el-form-item v-if="ruleForm.is_tag == 1">
					<el-button @click="labelapis('1')"
						><el-icon style="margin-right: 5px"><Plus /></el-icon>添加标签</el-button
					>
				</el-form-item>
				<el-form-item v-if="ruleForm.is_tag == 1">
					<el-button v-for="(select, index) in ruleForm.tags" :key="index">
						{{ select.tag_name }}
						<el-icon @click="tangListid(index)"><Close /></el-icon>
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="top-title" v-if="Route.query.type == 2 || typevalue == 0">设置群消息</div>
		<div class="top-title" v-if="Route.query.type == 1">
			群设置 <span><el-switch v-model="ruleForm.is_group" :active-value="1" :inactive-value="2" /></span
			><span style="font-size: 14px; font-weight: 500; color: #a8adaf">关闭后保持原自动拉群的入群欢迎语</span>
		</div>
		<div style="margin-top: 20px" v-if="ruleForm.is_group==1">
			<el-row :gutter="20">
				<el-col :span="16"
					><div class="grid-content ep-bg-purple">
						<el-form
							ref="ruleFormRef"
							:model="ruleForm"
							:rules="rules"
							label-width="120px"
							class="demo-ruleForm"
							:size="formSize"
							status-icon
							show-message="false"
						>
							<el-form-item label="群名称设置" class="is-required" v-if="ruleForm.join_type == 1">
								<div style="width: 100%">
									<el-switch v-model="ruleForm.is_group_name" :active-value="1" :inactive-value="2" />
									<span style="margin-left: 10px">{{ ruleForm.is_group_name == 1 ? '已开启' : '已关闭' }}</span>
								</div>
								<div>
									<el-input
										v-model="ruleForm.group_name"
										:disabled="ruleForm.is_group_name == 1 ? false : true"
										placeholder="请输入群名称"
									/>
								</div>
							</el-form-item>
							<el-form-item label="入群引导语" class="is-required" v-if="ruleForm.join_type == 1">
								<div style="width: 100%">
									<el-switch v-model="ruleForm.is_group_welcome" :active-value="1" :inactive-value="2" />
									<span style="margin-left: 10px">{{ ruleForm.is_group_welcome == 1 ? '已开启' : '已关闭' }}</span>
								</div>
								<div>
									<el-input
										v-model="ruleForm.group_welcome"
										:disabled="ruleForm.is_group_welcome == 1 ? false : true"
										placeholder="请输入群名称"
									/>
								</div>
							</el-form-item>
							<el-form-item label="上传头像" class="is-required uploadImgContainer" v-if="ruleForm.join_type == 1">
								<Upload :imgurl="ruleForm.group_image" @getImg="getUploadImg1($event)" />
							</el-form-item>
							<el-form-item v-if="ruleForm.join_type == 1">
								<div style="background-color: #fff7f0; color: #bc5526; margin-top: 10px; padding: 5px" >
									<div>提示：1,可添加多个群聊，当前面的群人数达到上线后，自动发送后面的群二维码</div>
									<div style="padding-left: 43px">2,群人数上限最多为200人</div>
									<div style="padding-left: 43px">
										3,上传群二维码时请【仔细核对】，群二维码和群聊【对应错误】将导致【拉群任务失败】
									</div>
								</div>
							</el-form-item>
							<el-form-item label="入群欢迎语：" class="is-required" v-if="ruleForm.join_type == 2">
								<el-input
									v-model="ruleForm.welcome_text"
									maxlength="4000"
									:rows="7"
									placeholder="例：您好，欢迎您来咨询!   扫码下方二维码进群交流~   如有问题，可随时咨询"
									show-word-limit
									type="textarea"
								/>
								<div style="background-color: #fff7f0; color: #bc5526; margin-top: 10px; padding: 5px" v-if="typevalue != 1">
									<div>提示：1,可添加多个群聊，当前面的群人数达到上线后，自动发送后面的群二维码</div>
									<div style="padding-left: 43px">2,群人数上限最多为200人</div>
									<div style="padding-left: 43px">
										3,上传群二维码时请【仔细核对】，群二维码和群聊【对应错误】将导致【拉群任务失败】
									</div>
								</div>
							</el-form-item>
							<div >
							<el-form-item
								v-for="(item, index) in ruleForm.group_data"
								:key="index"
								:label="'' + '群聊' + (index + 1) + '：'"
								class="is-required"
								v-if="typevalue == 2 || typevalue == 0"
							>
							<div style="display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column">
								<div style="display:flex;justify-content:flex-start;align-items:flex-start;">
								<div style="background-color: #fbfbfb; padding: 10px; width: 90%; float: left">
									<div style="background-color: #effaff">
										<el-icon style="color: #1890ff"><Bell /></el-icon>
										若群内添加了小助理机器人，请将【人数上限减1】，否则可能会导致拉群失败
									</div>
									<div style="margin-top: 15px" v-if="ruleForm.type == 1" @click="editsopapi(index)">
										<el-button
											><el-icon><Plus /></el-icon>选择群聊</el-button
										>
									</div>
									<el-button v-if="typevalue == 2" style="margin-top: 10px">
										{{ item.name }}
										<el-icon @click="groupListid(index)"><Close /></el-icon>
									</el-button>
									<el-button v-for="(select, index) in item.data" :key="index" style="margin-top: 10px" v-else>
										{{ select.name }}
										<el-icon @click="groupListid(index)"><Close /></el-icon>
									</el-button>

									<div style="margin-top: 15px" class="uploadImgContainer">
										<Upload v-if="item.code" :imgurl="item.code" @getImg="getUploadImg2($event, index)" />
										<Upload v-else :imgurl="item.code" @getImg="getUploadImg2($event, index)" />
									</div>
									<div style="margin-top: 15px">
										<span>群聊人数上限：</span>
										<span
											><el-input v-model="item.size" type="number" style="width: 150px" placeholder="群聊人数上限"
										/></span>
									</div>
								</div>
								<el-icon v-if="index!=0" @click="deleChat(index)" style="margin-left: 5px" size="22px" ><Delete /></el-icon>
								</div>

								<el-button @click="addchat" style="margin-top: 16px" plain v-if="index==ruleForm.group_data.length - 1">
									<el-icon  style="margin-right: 5px" size="22px" ><CirclePlus /></el-icon>增加群聊
								</el-button>
								<!-- <div style="width: 10%; float: left">111</div> -->
						</div>
							</el-form-item>
							</div>
							<el-form-item v-if="typevalue == 2">
								<el-button type="primary" plain @click="addchat"
									><el-icon><Plus /></el-icon>添加群聊</el-button
								>
							</el-form-item>
							<el-form-item>
								<el-button v-for="(select, index) in chatApi" :key="index">
									{{ select.name }}
									<el-icon @click="groupListid(index)"><Close /></el-icon>
								</el-button>
							</el-form-item>
						</el-form></div
				></el-col>
				<el-col :span="8"
					><div class="grid-content ep-bg-purple">
						<!-- <div> -->
						<!-- <img
							src="https://assets.weibanzhushou.com/web/we-work-webapp/dist/res/imgs/group-infinite/phone-preview-bg.png"
							style="width: 60%"
							v-if="ruleForm.join_type == 1"
						/> -->
						<div class="phoneContainer" v-if="ruleForm.join_type == 1">
							<div class="phoneHeader">
								<img
									:src="
										ruleForm.group_image
											? ruleForm.group_image
											: 'http://weidogstest.oss-cn-beijing.aliyuncs.com/ce8383e62540705e87b9613e10ff8e88.png'
									"
								/>
								<div class="phoneHeaderInfo">
									<p>{{ ruleForm.group_name == '' ? '群名称' : ruleForm.group_name }}</p>
									<p>{{ ruleForm.group_welcome == '' ? '入群引导语' : ruleForm.group_welcome }}</p>
								</div>
							</div>
						</div>
						<!-- </div> -->
						<div class="app-input-phone" v-if="ruleForm.join_type == 2">
							<div class="app-phone-scroll">
								<div class="app-flex-left-top" v-if="ruleForm.welcome_text != ''">
									<div class="app-avatar">
										<MyIcon class="app-white-font" name="Person" />
									</div>
									<div>
										<div class="app-phone-words">
											{{ ruleForm.welcome_text }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div></el-col
				>
			</el-row>
		</div>
		<!-- <div class="top-title">功能设置</div> -->
		<!-- <div style="height: 200px; margin-top: 20px">
			<div style="width: 100px; height: 140px; float: left">二维码预览：</div>
			<div style="height: 140px; float: left">
				<el-upload
					class="avatar-uploader"
					action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</div>
		</div> -->
		<!-- <div style="margin-top: 20px; color: #a6acb2">此二维码只是样式预览效果，请勿直接使用</div> -->
		<div style="margin-top: 20px">
			<el-button type="primary" @click="autoAdd()">创建活码</el-button>
		</div>
		<el-dialog v-model="dialogVisible" title="拉群详情" width="30%" :before-close="handleClose">
			<div>
				<el-form :model="form" label-width="120px">
					<el-form-item label="创建时间：">2021-06-08 10:50</el-form-item>
					<el-form-item label="上线成员：">
						<div></div>
					</el-form-item>
					<el-form-item label="下线成员：">-</el-form-item>
					<el-form-item label="员工添加上限：">已关闭</el-form-item>
					<el-form-item label="备用成员：">2021-06-08 10:50</el-form-item>
					<el-form-item label="客户标签：">’</el-form-item>
					<el-form-item label="拉群方式：">群二维码拉群</el-form-item>
					<el-form-item label="入群引导语：">您好，欢迎</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
		<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
		<editsop ref="editData" :groupchatapi="groupchatapi"></editsop>
	</div>
</template>
<script setup>
import Upload from '@/components/app/upload.vue'
import { Calendar, Search } from '@element-plus/icons-vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import labels from '../../../components/app/label.vue'
import editsop from '../../../components/app/groupchat.vue'
import { toRaw } from '@vue/reactivity'
import { ref, reactive, onMounted } from 'vue'
import {
	requestAutoAdd,
	userAutogroupGrouping,
	reqAutoGetInfo,
	reqAutoUpd,
	reqStaffList,
	autogroupGroupids,
	reqAutoaddGetbatch,
	userAutogroupBatch
} from '@/api'
import { deepClone } from '@/utils'
import { useRoute, useRouter } from 'vue-router'
const Route = useRoute()
const router = useRouter()
const radio = ref('1')
const typevalue = ref('1')
const tableData = ref([])
const agreeChange = (val) => {
	console.log(val)
	radio.value = val
}
const deleteid = (val) => {
	for (var i = 0; i < tableData.value.length; i++) {
		if (val.id == tableData.value[i].id) {
			tableData.value.splice(i, 1)
		}
	}
}
const staffList = ref([])
onMounted(() => {
	console.log(Route.query.type)
	typevalue.value = Route.query.type
	if (Route.query.type == 2) {
		if (Route.query.id) {
			reqAutoGetInfo({ id: Route.query.id }).then((res) => {
				ruleForm.type = res.data.type + ''
				ruleForm.name = res.data.name
				ruleForm.grouping_id = res.data.grouping_id
				ruleForm.staffs = res.data.staffs
				ruleForm.standby = []
				res.data.standby.forEach(item=>{
					ruleForm.standby.push(item.id)
				})
				ruleForm.is_tag = res.data.is_tag
				ruleForm.is_astrict = res.data.is_astrict 
				ruleForm.tags = res.data.tags
				ruleForm.welcome_text = res.data.welcome_text
				ruleForm.join_type = res.data.join_type + ''
				ruleForm.skip_verify = res.data.skip_verify
				ruleForm.group_data = res.data.group_data
				ruleForm.group_name = res.data.group_name
				ruleForm.group_welcome = res.data.group_welcome
				ruleForm.group_image = res.data.group_image
				ruleForm.is_group_name = res.data.is_group_name
				ruleForm.is_group_welcome = res.data.is_group_welcome
			})
		}
	} else if (Route.query.type == 1) {
		console.log(ruleForm.join_type)
		ruleForm.join_type.value == '2'
		reqAutoaddGetbatch({ ids: Route.query.id.split(',') }).then((res) => {
			tableData.value = res.data
		})
	}

	reqStaffList({ page: 1, size: 9999 }).then((res) => {
		staffList.value = res.data.item
	})
})
const radio1 = ref('1')
const ruleFormRef = ref()
const labelData = ref(false)
const skipVerify = ref('')
const editData = ref()
const switchControl = ref(false)
const groupin = ref([])
const userAutogroupGroupingapi = () => {
	userAutogroupGrouping().then((res) => {
		groupin.value = res.data
	})
}
userAutogroupGroupingapi()
const valueChange = (val) => {
	skipVerify.value = val
	console.log(skipVerify.value)
}
// 标签弹窗
const isTag = ref([])
const groupList = ref(1)
const labeldataapi = (val) => {
	console.log('测试', val)
	if (groupList.value == 1) {
		var Type = toRaw(val)
		ruleForm.tags = Type.list
	}
}

const tangListid = (index) => {
	console.log(isTag._value.list)
	isTag._value.list.splice(index, 1)
}

const TestRef = ref()
const labeldata = ref(false)
const labelapis = (val) => {
	groupList.value = val
	console.log('群弹窗', groupList.value)
	var data = {
		show: true,
		type: 2
	}
	TestRef.value.tableshow(data)
}

const labelapi = (val) => {
	console.log('111', labelData.value)
	if (labelData.value == 1) {
		labeldata.value = true
	}
}

const ruleForm = reactive({
	type: '1',
	join_type: '2',
	name: '',
	welcome_text: '',
	skip_verify: '',
	is_astrict: '',
	is_tag: '',
	grouping_id: '',
	astrict: [],
	staffs: [],
	standby: [],
	tags: [],
	is_group_name: '2',
	is_group_welcome: '2',
	group_welcome: '',
	group_name: '',
	group_data: [
		{
			code: '',
			size: '',
			group_id: '',
			data: {}
		}
	],
	user_set: 1,
	is_group: 1
})
// const isFresh = ref(true)
const addchat = () => {
	
	// isFresh.value = false
	ruleForm.group_data.push({
		code: '',
		size: '',
		group_id: '',
		data: {}
	})
	console.log(ruleForm.group_data,'yuiyuiyui')
	// isFresh.value = true
}
const deleChat = (index) => {
	
	// isFresh.value = false
	ruleForm.group_data.splice(index,1)
	console.log(ruleForm.group_data,'yuiyuiyui')
	// isFresh.value = true
}


// 分组弹窗
const openingDialogName = ref('')
const chooseDialogue = ref()
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
const typeshow = ref(1)
const showDialogue = (type, name, title) => {
	typeshow.value = type
	console.log('弹窗', typeshow.value)
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)
				console.log(name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			if (title == 'staffidTime') {
				openingDialogName.value = 'staffidTime'
				var arr = toRaw(form.value.staffidTime)
				console.log('5555', name, dataArr)
				chooseDialogue.value.show(name, dataArr)
			}
			break
		case 'tag':
			openingDialogName.value = name
			var arr = toRaw(form.value[name])
			var dataArr = []
			arr.forEach((item) => {
				dataArr.push(item)
			})
			chooseDialogue.value.show(name, dataArr)
			break
	}
}
// 删除按钮
const handleDele = (name, item, index) => {
	console.log('111', name)
	switch (name) {
		case 'staffidTime':
			var arr = toRaw(staff_data.value)
			arr.splice(index, 1)
			staff_data._value = arr
			break
		case 'staffid':
			if (typeshow.value == 1) {
				var arr = selectStaffValue.value
				arr.splice(index, 1)
				selectStaffValue._value = arr
				var json = toRaw(form.value)
				form._value = json
			} else if (typeshow.value == 2) {
				var arr = selectStaffDay.value
				arr.splice(index, 1)
				selectStaffDay._value = arr
				var json = toRaw(form.value)
				form._value = json
			}
			break
		case 'staff_standby':
			var arr = selectstaff_standbyData.value
			arr.splice(index, 1)
			selectstaff_standbyData._value = arr
			var json = toRaw(form.value)
			// json[name].splice(index, 1)
			form._value = json
			break
		case 'tag':
			var arr = selectTagData.value
			arr.splice(index, 1)
			selectTagData._value = arr
			var json = toRaw(form.value)
			// json[name].splice(index, 1)
			form._value = json
			break
	}
	handleRefresh()
}
// 强制刷新
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
// 选择员工弹窗
const getDataByIds = (val) => {
	switch (val) {
		case 'staffid':
			console.log(val)
			selectStaffData._value = toRaw(form.value[val])
			console.log('根据ids获取已选员工列表', form.value[val], selectStaffData._value)
			break
		case 'staffidTime':
			console.log(form.value[val], '879789789')
			var arr = toRaw(staff_data.value)
			arr[staff_dataIndex.value].selectStaffData = form.value[val]
			staff_data._value = arr
			console.log('根据ids获取已选员工列表', staff_data.value)
			break
		case 'staff_standby':
			selectstaff_standbyData._value = [
				{
					id: 1,
					name: '21',
					avatar:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fec%2Fca%2Fd8%2Feccad87a334d082b8ff200ae01157e44.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639642180&t=2652a2445af742fc8a4bb6c8e4f18d1e',
					rbacName: '管理员'
				}
			]
			break
		case 'tag':
			selectTagData._value = [
				{
					id: 1,
					name: '21'
				}
			]
			break
	}
	handleRefresh()
}
// 弹窗保存按钮
const selectStaffValue = ref([]) //选择分组定义
const selectStaffDay = ref([])
const getChooseData = (val) => {
	if (typeshow.value == 1) {
		var Type = toRaw(val)
		ruleForm.staffs = Type
		for (var i = 0; i < ruleForm.staffs.length; i++) {
			ruleForm.staffs[i].size = 1
		}
		// getDataByIds(selectStaffValue.value)
	} else if (typeshow.value == 2) {
		var Type = toRaw(val)
		selectStaffDay.value = Type
		getDataByIds(selectStaffDay.value)
	}
}

const emits = defineEmits(['goBack'])
const chatApi = ref([])
const chatData = ref([])
const typeData = ref(1)
const groupchatapi = (val) => {
	console.log(val)
	ruleForm.group_data[typeData.value].data = val.value
	console.log(ruleForm.group_data[typeData.value].data)
	// if (typeData.value == 1) {
	// 	var Type = toRaw(val)
	// 	chatData.value = Type._value
	// 	console.log('返回数据', chatData.value)
	// } else if (typeData.value == 2) {
	// 	var Type = toRaw(val)
	// 	console.log('数据', Type._value)
	// 	chatApi.value = Type._value
	// 	console.log('返回数据', chatApi.value)
	// }
}
const groupListid = (index) => {
	console.log('111', chatApi)
	chatData.value.splice(index, 1)
}
const editsopapi = (val) => {
	autogroupGroupids().then((res) => {
		typeData.value = val
		console.log('弹窗', typeData.value)
		var data = {
			show: true,
			id: val,
			name: val.name,
			quantity: 1,
			ids: res.data
		}
		editData.value.addapi(data)
	})
}
const autoAdd = (val) => {
	// if (){
		
	// }
	if (typeshow.value == 1) {
		
		console.log('222', chatData.value)
		var data = {
			type: ruleForm.type,
			join_type: ruleForm.join_type,
			name: ruleForm.name,
			welcome_text: ruleForm.welcome_text,
			skip_verify: ruleForm.join_type == 1 ? '' : ruleForm.skip_verify,
			is_astrict: ruleForm.join_type == 1 ? '' : ruleForm.is_astrict,
			is_tag: ruleForm.join_type == 1 ? '' : ruleForm.is_tag,
			grouping_id: ruleForm.grouping_id,
			astrict: ruleForm.join_type == 1 ? '' : ruleForm.staffs,
			staffs: ruleForm.join_type == 1 ? '' : ruleForm.staffs,
			standby: ruleForm.standby,
			tags: ruleForm.join_type == 1 ? '' : ruleForm.tags,
			group_data: ruleForm.group_data,
			is_group_name: ruleForm.join_type == 2 ? '' : ruleForm.is_group_name,
			is_group_welcome: ruleForm.join_type == 2 ? '' : ruleForm.is_group_welcome,
			group_welcome: ruleForm.join_type == 2 ? '' : ruleForm.group_welcome,
			group_name: ruleForm.join_type == 2 ? '' : ruleForm.group_name,
			group_image: ruleForm.join_type == 2 ? '' : ruleForm.group_image
		}
		console.log(data)
		
		if(!data.group_data[0].data[0]){
			if(ruleForm.type == 1){
				return  ElMessage({
								message: '请先添加群聊',
								type: 'warning',
							})
			}
			
		}
		var tagsid = []
		for (var i = 0; i < ruleForm.tags.length; i++) {
			tagsid.push(ruleForm.tags[i].tag_id)
		}
		data.tags = tagsid
		try{
		for (var i = 0; i < data.group_data.length; i++) {
			if (data.type == 1) {
				
				console.log(data.group_data[i].data[0].id)
				if (data.group_data[i].data) {
					if(data.group_data[i].data[0].id){
						data.group_data[i].group_id = data.group_data[i].data[0].id
					}else{
						
					}
					
				}

			} else {
				
				data.group_data[i].group_id = ''
			}
		}
		console.log(data.group_data[0].data[0])
		
		var ids = []
		for (var i = 0; i < toRaw(ruleForm.staffs).length; i++) {
			ids.push(toRaw(ruleForm.staffs)[i].id)
		}
		console.log(ruleForm.staffs,ids,'ghjhhhhhhhhh')

		data.staffs = ids
		}catch{}
		if (Route.query.id) {
			data.id = Route.query.id
				var ids = []
		for (var i = 0; i < toRaw(ruleForm.staffs).length; i++) {
			ids.push(toRaw(ruleForm.staffs)[i].id)
		}
		console.log(ruleForm.staffs,ids,'ghjhhhhhhhhh')

		data.staffs = ids
			console.log(ruleForm.staffs,ids,'ghjhhhhhhhhh')
			if(Route.query.type == 1){
				console.log(data,'userAutogroupBatchaaaaaaaaaaaaaaaaaa')
				data.user_set = ruleForm.user_set
				data.is_group = ruleForm.is_group
				data.group_text = data.welcome_text
					userAutogroupBatch(data).then((res) => {
					ElMessage({ message: '提交成功', type: 'success' })
					router.push('autogroup')
				})
			}else{
				reqAutoUpd(data).then((res) => {
				console.log(res, '3333')
				ElMessage({ message: '提交成功', type: 'success' })
				router.push('autogroup')
			})
			}
			
		} else {
			requestAutoAdd(data).then((res) => {
				console.log(res, '3333')
				ElMessage({ message: '提交成功', type: 'success' })
				router.push('autogroup')
			})
		}
	} else {
		var idsdata = []
		for (var i = 0; i < tableData.value.length; i++) {
			idsdata.push(tableData.value[i].id)
		}
		var idsstaffs = []
		for (var i = 0; i < ruleForm.staffs.length; i++) {
			idsstaffs.push(ruleForm.staffs[i].id)
		}
		console.log(idsstaffs,ruleForm.standby,'kkkkkkkkkkk')

		var data = {
			ids: idsdata,
			user_set: ruleForm.user_set,
			staffs: idsstaffs,
			standby: ruleForm.standby,
			is_tag: ruleForm.is_tag,
			tags: '',
			skip_verify: ruleForm.skip_verify,
			is_astrict: ruleForm.is_astrict,
			astrict: ruleForm.staffs,
			is_group: ruleForm.is_group,
			group_text: ruleForm.group_text
		}
		// var ids = []
		// for (var i = 0; i < ruleForm.staffs.length; i++) {
		// 	ids.push(ruleForm.staffs[i].id)
		// }

		// data.staffs = ids
		var tagsid = []
		for (var i = 0; i < ruleForm.tags.length; i++) {
			tagsid.push(ruleForm.tags[i].tag_id)
		}
		data.tags = tagsid
		console.log(data)
		userAutogroupBatch(data).then((res) => {
			ElMessage({ message: '提交成功', type: 'success' })
			router.push('autogroup')
		})
	}
}

const rules = reactive({
	type: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	],
	age: ''
})
const num = ref(1)

const details = () => {
	dialogVisible.value = true
}
const dialogVisible = ref(false)
const getUploadImg1 = (val) => {
	console.log(val)
	ruleForm.group_image = val.url
}
const getUploadImg2 = (val, index) => {
	console.log(val)
	console.log(index)
	ruleForm.group_data[index].code = val.url
}
</script>
<style lang="scss">
@import url('../../../style/app-component.scss');
@import '../../../style/mixin.scss';
.app-phone-scroll {
	margin: 0px 20px 154px 26px;
	@include scrollBar;
	overflow: auto;
	height: calc(100% - 208px);
}
.app-flex-left-top {
	margin-top: 104px;
}
.body-bgc {
	background-color: #fff;
	margin: 15px;
	padding: 15px;
}
.top-title {
	font-weight: 600;
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 15px;
	margin-top: 15px;
}
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.uploadImgContainer .el-icon {
	width: 120px;
	height: 120px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type='number'] {
	-moz-appearance: textfield;
}
.phoneContainer {
	background: url(../../../assets/img/img/phone-preview-bg.png)
		no-repeat center center/cover;
	width: 320px;
	height: 626px;
	position: relative;
	box-sizing: border-box;
}
.phoneHeader {
	display: flex;
	align-items: center;
	position: absolute;
	top: 163px;
	left: 58px;
}
.phoneHeader img {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: contain;
}
.phoneHeaderInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 40px;
	justify-content: space-between;
	margin-left: 5px;
}
.phoneHeaderInfo p:first-child {
	font-size: 13px;
	color: #333;
	font-weight: bold;
}
.phoneHeaderInfo p:last-child {
	font-size: 12px;
	color: #999;
}
</style>
